<template>
    <div class="card-item shadow-sm" v-loading="dataStatus=='loading'">
        <div class="h-full flex-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="dataStatus = 'loading'"></component-page-loading>
        </div>
        <div class="h-full flex flex-col justify-between" v-else>
            <div class="item-title">
                <div>{{ $t('index.chart.online.title') }}</div>
                <div>
                    <el-button circle size="mini" icon="el-icon-arrow-left" @click="dayPre"></el-button>
                    <component-page-option-datetime type="date" size="small" align="right" :clearable="false" class="w-32" disabledTodayAfter
                                                    :init-last-day="0" v-model="filterOption.datetime" @change="filterChange">
                    </component-page-option-datetime>
                    <el-button circle size="mini" icon="el-icon-arrow-right" @click="dayNext" :disabled="nextDayStatus"></el-button>
                </div>
            </div>
            <div class="item-chart">
                <component-page-echarts ref="chartLine"></component-page-echarts>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataStatus: 'dle',
            today: null,
            filterOption: {
                datetime: null,
            },
            data: null,
        }
    },
    computed: {
        nextDayStatus() {
            return new Date(this.filterOption.datetime * 1000).getTime()
                >= this.$store.getters['config/timedDayTimestamp']();
        }
    },
    watch: {
        '$i18n.locale': function (n, o) {
            if (this.data != null) {
                this.initChart(this.data);
            }
        },
    },
    methods: {
        initChart(chart) {
            let option = {
                color: ["#91c7ae", "#d48265"],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    type: 'scroll',
                    padding: [0, 100],
                    data: [
                        this.$t('index.chart.online.online'),
                        this.$t('index.chart.online.gaming'),
                    ],
                },
                grid: {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 80,
                },
                xAxis: {
                    show: true,
                    boundaryGap: false,
                    data: chart.timed
                },
                yAxis: {
                    show: true,
                    axisLine: {show: false},
                    axisTick: {show: false},
                },
                series: [{
                    type: 'line',
                    name: this.$t('index.chart.online.online'),
                    data: chart.data.online.map(item => this.$store.getters['config/filterNumeral'](item))
                }, {
                    type: 'line',
                    name: this.$t('index.chart.online.gaming'),
                    data: chart.data.gaming.map(item => this.$store.getters['config/filterNumeral'](item))
                }]
            };
            // 渲染图表
            this.$refs.chartLine.setOption(option);
        },
        filterChange() {
            this.dataStatus = 'loading';
            // 记录今日时间戳
            if (this.today == null) {
                this.today = this.filterOption.datetime;
            }
            this.getData();
        },
        dayPre() {
            this.dataStatus = 'loading';
            this.filterOption.datetime -= 86400;
            this.getData();
        },
        dayNext() {
            this.dataStatus = 'loading';
            this.filterOption.datetime += 86400;
            this.getData();
        },
        getData() {
            axios.get('/index/chart/online', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStatus = 'dle';
                    this.data = response.data.resp_data;
                    // 渲染图表
                    this.initChart(this.data);
                } else {
                    this.dataStatus = 'error';
                }
            });
        },
    },
    mounted() {
        // 定时更新在线状态
        this.intervalId = setInterval(() => {
            if (this.today == this.filterOption.datetime && this.dataStatus != 'loading') {
                this.getData();
            }
        }, 60000);
    },
    beforeDestroy() {
        clearInterval(this.intervalId);
    }
}
</script>

<style lang="scss" scoped>
.card-item {
    background-color: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    height: 320px;
}

.card-item .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 20px;
    height: 60px;
}

.card-item .item-number {
    font-size: 2.5rem;
    position: absolute;
    left: 20px;
    top: 40px;
}

.card-item .item-chart {
    height: 260px;
}
</style>
